<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function fun1(){
				var t1=new XMLHttpRequest()
				t1.open("GET","person1.xml",true)
				t1.send();
				t1.onreadystatechange=function(){
					if(t1.readyState==4&&t1.status==200){
						let xmldata=t1.responseXML;
						document.getElementById("d1").innerHTML=xmldata.getElementsByTagName("title")[0].childNodes[0].nodeValue
						document.getElementById("d2").innerHTML=xmldata.getElementsByTagName("name")[0].childNodes[0].nodeValue
						document.getElementById("d3").innerHTML=xmldata.getElementsByTagName("tag")[0].childNodes[0].nodeValue
						document.getElementById("d4").innerHTML=xmldata.getElementsByTagName("achievement")[0].childNodes[0].nodeValue
						document.getElementById("d5").innerHTML=xmldata.getElementsByTagName("describe")[0].childNodes[0].nodeValue
					}
				}
			}
			
			function fun2(){
				let people=[]
				var t2=new XMLHttpRequest()
				t2.open("GET","person2.xml",true)
				t2.send();
				t2.onreadystatechange=function(){
					if(t2.readyState==4&&t2.status==200){
						let xmldata=t2.responseXML;
						people=xmldata.getElementsByTagName("person")[0]
						document.getElementById("b1").innerHTML=people.getAttribute("title")
						document.getElementById("b2").innerHTML=people.getAttribute("name")
						document.getElementById("b3").innerHTML=people.getAttribute("tag")
						document.getElementById("b4").innerHTML=people.getAttribute("archivement")
						document.getElementById("b5").innerHTML=people.getAttribute("describe")
					}
				}
			}
			
		</script>
	</head>
	<body>
		<h2>点击按钮请求XML数据</h2>
		<h3>person1.xml的XML文本信息如下：</h3>
		标题：<span id="d1"></span><br>
		姓名：<span id="d2"></span><br>
		头衔：<span id="d3"></span><br>
		成就：<span id="d4"></span><br>
		简述：<span id="d5"></span><br>
		<button type="button" onclick="fun1()">读取XML文本内容</button>
		<hr >
		<h3>person2.xml的XML文本信息如下：</h3>
		标题：<span id="b1"></span><br>
		姓名：<span id="b2"></span><br>
		头衔：<span id="b3"></span><br>
		成就：<span id="b4"></span><br>
		简述：<span id="b5"></span><br>
		<button type="button" onclick="fun2()">读取XML属性内容</button>
	</body>
</html>
